<template>
	<view class="container">
		<!-- <custom-header :title="pageType === 'text' ? '链接转文字' : '短视频下载'" show-bg-color show-back  v-if="pageFrom === 'index'"/> -->
		<view class="layout">
			<view class="upload-layout" v-if="pageFrom === 'index'">
				<view class="title">视频链接</view>
				<view class="file">
					<textarea class="input-box" v-model="url" maxlength="-1" auto-height placeholder="此处添加视频链接" />
				</view>
				<view>
					<radio-group @change="radioChange($event,item)">
						<label class="radio">
							<radio value="fast" :checked="true" />转写通道1（快速）
						</label>
						<label class="radio" style="float: right;">
							<radio value="precise" />转写通道2（精准）
						</label>
					</radio-group>
				</view>
				<view>
					<checkbox-group @change="checkboxChange">
						<label class="checkbox">
							<checkbox value="cb" style="transform:scale(0.7); margin-right: -3px" color="#4DA1FE" :checked="chapterCheck" />是否有B站章节
						</label>
					</checkbox-group>
				</view>
				<view class="chapter-content" v-if="chapterCheck">
					<view class="chapter-column">
						<input class="chapter-input" v-model="chapter" type="number" placeholder="请输入具体章" @input="chapterFixedDigit" />
						<view class="chapter-label">章</view>
					</view>
					<view class="chapter-column">
						<input class="chapter-input" v-model="section" type="number" placeholder="请输入具体节" @input="sectionFixedDigit" />
						<view class="chapter-label">节</view>
					</view>
				</view>
				<view class="btn-group">
					<view :class="['btn', url ? 'active': '']" @click="onExtractClick">开始解析</view>	
				</view>
			</view>
			<extract-layout :task-id="taskId" v-show="pageFrom === 'history'" />
		</view>
	</view>
</template>

<script setup>
	import { ref, nextTick } from 'vue';
	import { onUnload, onLoad } from '@dcloudio/uni-app';
	import { extractTextWithUrlVideo, extractVideoByUrl, apiGetStatus, checkId } from '@/utils/api.js';
	
	// https://txmov2.a.kwimgs.com/upic/2025/04/11/19/BMjAyNTA0MTExOTM4MThfNTY2OTg3NTAyXzE2MTQ3NDAzMDg0Ml8yXzM=_b_Be3e7720ab204f0a893bd801ffbeb23ba.mp4?clientCacheKey=3x2dduedqdcnmk2_b.mp4&tt=b&di=8cfa5a17&bp=10000
	const url = ref('');
	const taskId = ref(null);
	const pageFrom = ref('index'); // 页面来源
	let pageType = ref(''); // 页面类型 text/video
	let thoroughfare = ref('fast'); // 通道
	const chapterCheck = ref(false);
	const chapter = ref(undefined);
	const section = ref(undefined)
	
	const onExtractClick = async () => {
		console.log(pageType.value);
		const userInfo = JSON.parse(uni.getStorageSync("userInfo"));
		console.log(userInfo);
		const type = pageType.value === 'text' ? 1 : 2;
		const userId = userInfo.id;
		const { data } = await checkId({
			userId,
			type
		}); 
		if (data.valid) {
			//在有效期内
			if (pageType.value === 'text') {
				onExtractText();
			} else if (pageType.value === 'video') {
				onExtractVideo();
			}
		} else {
			uni.showModal({
				// title: data.message,
				content: '暂无可用时间，请联系客服购买兑换码',
				showCancel: false,
				success: function(res) {
					if (res.confirm) {
						// uni.navigateBack()
						uni.redirectTo({
						  url: '/pages/membership/membership'
						})
					}
				}
			})
		}
	}
	
	const onExtractText = async () => {
		uni.showLoading({
			title: '处理中'
		})
		const params = {
			url: url.value,
			thoroughfare: thoroughfare.value,
		}
		if (chapterCheck.value) {
			params.chapter = chapter.value;
			params.section = section.value;
		}
		const { success, data, message } = await extractTextWithUrlVideo(params); 
		if (success) {
			uni.hideLoading();
			uni.showModal({
				title: '提交成功',
				content: '稍后可在我的-历史记录里查看结果',
				showCancel: false,
				success: function(res) {
					if (res.confirm) {
						// uni.navigateBack()
						uni.setStorageSync('tabInfo', 1);
						nextTick(() => {
						  uni.switchTab({
						    url: '/pages/extract_record/extract_record',
						  })
						})
					}
				}
			})
		} else {
			uni.showToast({
				title: message,
				icon: 'none',
				duration: 5000,
			})
		}
	}
	
	const onExtractVideo = async () => {
		uni.showLoading({
			title: '处理中'
		})
		const params = {
			url: url.value,
			thoroughfare: thoroughfare.value,
		}
		if (chapterCheck.value) {
			params.chapter = chapter.value;
			params.section = section.value;
		}
		const { success, data, message } = await extractVideoByUrl(params); 
		if (success) {
			uni.hideLoading();
			uni.showModal({
				title: '提交成功',
				content: '稍后可在我的-历史记录里查看结果',
				showCancel: false,
				success: function(res) {
					if (res.confirm) {
						uni.setStorageSync('tabInfo', 4);
						nextTick(() => {
						  uni.switchTab({
						    url: '/pages/extract_record/extract_record',
						  })
						})
					}
				}
			})
		} else {
			uni.showToast({
				title: message,
				icon: 'none',
				duration: 5000,
			})
		}
	}
	
	onLoad((e) => {
		pageFrom.value = e.pageFrom;
		pageType.value = e.type;
		if (e.pageFrom === 'history') {
			taskId.value = e.taskId
		}
		if (pageType.value === 'text') {
			uni.setNavigationBarTitle({
				title: '链接转文字',
			});
		} else if (pageType.value === 'video') {
			uni.setNavigationBarTitle({
				title: '短视频下载',
			});
		}
	})
	
	const radioChange = (e) => {
		thoroughfare.value = e.detail.value;
	}
	
	const checkboxChange = (e) => {
		console.log(e.detail.value);
		if (e.detail.value.length == 1) {
			chapterCheck.value = true
		} else {
			chapterCheck.value = false
		}
		console.log(chapterCheck.value)
	}
	
	const chapterFixedDigit = (e) => { // 只能输入整数
	  e.target.value = e.target.value.replace(/^0|[^\d]|[.]/g, '')
	  nextTick(() => {
		chapter.value= e.target.value
	  })
	}
	
	const sectionFixedDigit = (e) => { // 只能输入整数
	  e.target.value = e.target.value.replace(/^0|[^\d]|[.]/g, '')
	  nextTick(() => {
		section.value= e.target.value
	  })
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #F3F8FF;
		.layout {
			width: 100%;
			padding: 24rpx 48rpx;
			display: flex;
			flex-direction: column;
			gap: 24rpx;
			.upload-layout {
				min-height: 414rpx;
				background-color: white;
				border-radius: 12rpx;
				padding: 36rpx 24rpx;
				.title {
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
				}
				.file {
					margin-top: 32rpx;
					// height: 92rpx;
					border: 1rpx solid #E4E7EC;
					border-radius: 8rpx;
					padding: 24rpx;
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #999;
					.input-box {
						width: 100%;
					}
				}
				.btn-group {
					margin-top: 24rpx;
					display: flex;
					gap: 24rpx;
					align-items: center;
					justify-content: center;
					.btn {
						width: 217rpx;
						height: 72rpx;
						color: white;
						font-size: 28rpx;
						font-weight: 400;
						background-color: #AAB2C3;
						border-radius: 8rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.active {
						background: #0051FE;
					}
					.reset {
						background: #F3F8FF;
						color: #0051FE;
					}
				}
				
			}
			.radio {
				font-size: 24upx;
				color: #333333;
				display: inline-block;
				margin: 32upx 0;
			
				:deep(radio .wx-radio-input) {
					width: 28upx;
					height: 28upx;
					background: #FFFFFF;
					border-radius: 50%;
					border: 1px solid #9DC5F2;
					margin-top: -4upx;
				}
			    :deep(radio .wx-radio-input-checked) {
					background: #fff !important;
					&::before {
						content: '';
						width: 18upx;
						height: 18upx;
						border-radius: 50%;
						margin: auto;
						background: #4DA1FE;
					}
				}
			}
			.checkbox {
				font-size: 24upx;
				color: #333333;
				display: inline-block;
				margin-left: -5px;
			}
			.chapter-content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.chapter-column {
					width: 40%;
					font-size: 24upx;
					display: flex;
					.chapter-input {
						display: inline-block;
						border-bottom: 1px solid #ccc;
						height: 60upx;
						float: left;
					}
					.chapter-label {
						display: inline-block;
						line-height: 60upx;
						float: left;
						margin-left: 16upx;
					}
				}
			}
		}
		
	}
	
</style>
